* {
    padding: 0;
    margin:0;
    box-sizing: border-box;
}
body {
    height: 100%;
    background: #fff;
}
.wrap {
    position: absolute;
    bottom: 6.25rem;
    width: 6.25rem;
    margin-left: -50px;
    .ball {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 3.125rem;
        height: 3.125rem;
        border-radius: 50%;
        animation: ballMove 500ms infinite alternate;
    }
}
.red {
    left: 25%;
    .ball {
        animation-delay: -200ms;
        background:linear-gradient(#e55, #b00);
    }
    .shadow {
        animation-delay: -200ms;
    }
}
.green {
    left: 50%;
    .ball {
        animation-delay: -100ms;
        background: linear-gradient(#5d5, #0a0);
    }
    .shadow {
        animation-delay: -100ms;
    }
}
.blue {
    left: 75%;
    .ball {
        animation-delay: 0ms;
        background: linear-gradient(#59e, #04b);
    }
    .shadow {
        animation-delay: 0ms;
    }
}
.shadow {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 10%;
    width: 4.6875rem;
    height: 1.5625rem;
    z-index: -1;
    border-radius: 100%;
    background:rgb(56, 56, 56);
    animation: shadowMove 500ms infinite alternate;
}
@keyframes ballMove {
    from{
        transform: translateY(0);
    }
    to {
        transform: translateY(-150px);
    }
}
@keyframes shadowMove {
    from {
        transform: scale(0.75);
        opacity: .75;
    }
    to {
        transform: scale(1);
        opacity: .2;
    }
    
}


